<template>
	<section>
		<el-row>
			<el-col :span="12">
				<el-form label-width="120px">
					<el-form-item label="菜单名称">
						<el-input v-model="button.name"></el-input>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-row>
			<el-table :data="button.sub_button">
				<el-table-column label="子菜单名称">
					<template slot-scope="scope">
						{{scope.row.name}}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="70">
					<template slot-scope="scope">
						<el-button size="small" @click="edit(scope.row)">
							<template>
								<icon name="pencil"></icon>
							</template>
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-button style="margin: 15px 0;float: right" @click.native="create">
				<icon name="plus"></icon>
			</el-button>
		</el-row>

		<el-row>
			<el-col align="right" :span="24">
				<el-button @click="$router.push('/menu-management')">取消</el-button>
				<el-button type="primary">保存</el-button>
			</el-col>
		</el-row>

		<el-dialog v-model="dialog" :title="dialogTitle" v-if="dialog">
			<el-form label-width="80px">
				<el-form-item label="名称">
					<el-input type="text" v-model="eSubmenu.name"></el-input>
				</el-form-item>
				<el-form-item label="类型">
					<el-select placeholder="选择子菜单类型" v-model="eSubmenu.type">
						<el-option v-for="item in types" :key="item.name" :label="item.name" :value="item.value" :disabled="item.disabled"></el-option>
					</el-select>
				</el-form-item>
				<section v-if="eSubmenu.type==='click'">
					<el-form-item label="KEY">
						<el-input type="text" v-model="eSubmenu.key"></el-input>
					</el-form-item>
				</section>
				<section v-if="eSubmenu.type==='view'">
					<el-form-item label="URL">
						<el-input type="text" v-model="eSubmenu.url"></el-input>
					</el-form-item>
				</section>
			</el-form>
			<el-row>
				<el-col align="right">
					<el-button @click.native="reset">取消</el-button>
					<el-button type="primary" @click.native="submit">保存</el-button>
				</el-col>
			</el-row>
		</el-dialog>
	</section>
</template>

<script>
	export default {
		name:'menu-edit',
		mounted(){
			this.requestMenu();
		},
		data(){
			return {
				dialog:false,
				dialogTitle:'',
				types:[
					{name:'显示',value:'view'},
					{name:'点击',value:'click'},
					{name:'扫码带提示',value:'scancode_waitmsg',disabled:true},
					{name:'扫码推事件',value:'scancode_push',disabled:true},
					{name:'系统拍照发图',value:'pic_sysphoto',disabled:true},
					{name:'拍照或者相册发图',value:'pic_photo_or_album',disabled:true},
					{name:'微信相册发图',value:'pic_weixin',disabled:true},
					{name:'发送位置',value:'location_select',disabled:true},
					{name:'图片',value:'media_id',disabled:true},
					{name:'图文消息',value:'view_limited',disabled:true},
				],
				button:{
					name:'menu1',
					sub_button:[{name:'submenu1',type:''}],
				},
				eSubmenu:undefined,
			}
		},
		computed:{},
		methods:{
			requestMenu(){
				return new Promise((resolve,reject)=>{
					this.$store.dispatch({type:'getWechatMenu'})
						.then(res=>{
							console.log(res);
						})
						.catch(error=>{
							console.log(error);
						})
				})
			},
			reset(){
				this.dialog = false;
				this.dialogTitle = '';
				this.eSubmenu = undefined;
			},
			create(){
				this.dialogTitle = '新建子菜单';
				this.eSubmenu = {name:'',type:'',create:true};
				this.dialog = true;
			},
			edit(submenu){
				console.log(submenu);
				this.dialogTitle = '编辑子菜单';
				this.eSubmenu = submenu;
				this.dialog = true;
			},
		}
	}
</script>

<style lang="scss"></style>
